<template>
	<view class="container">
		<view class="user">

			<!-- #ifdef MP-WEIXIN -->
			<view class="left">
				<view class="nickname" v-if="JSON.stringify(business) !== '{}'">{{ business.nickname }}</view>
				<!-- 如果没有获取到就会显示微信昵称 -->
				<open-data v-else type="userNickName" class="nickname"></open-data>
			</view>
			<view class="right">
				<view class="avatar xcx">
					<u-avatar :src="business.avatar_cdn" size="90" v-if="JSON.stringify(business) !== '{}'"></u-avatar>

					<!-- 如果没有获取到就会显示微信头像 -->
					<open-data type="userAvatarUrl" v-else></open-data>
				</view>
			</view>
			<!-- #endif -->


			<!-- #ifdef H5 || APP-PLUS -->
			<view class="left">
				<view class="nickname" v-if="JSON.stringify(business) !== '{}'">
					{{ business.nickname }}
				</view>
				<view class="nickname" v-else>
					请选登陆
				</view>
				<view class="email" v-if="JSON.stringify(business) !== '{}'">
					{{ business.email }}
				</view>
			</view>
			<view class="right">
				<view class="avatar">
					<u-avatar :src="business.avatar_cdn" size="90" v-if="JSON.stringify(business) != '{}'"></u-avatar>
					<u-avatar src="/static/avatar.jpg" size="90" v-else></u-avatar>
				</view>
			</view>
			<!-- #endif -->
		</view>


		<view class="menu" v-if="JSON.stringify(business) !== '{}'">
			<view class="item" hover-class="checkActive" @click="ToProduct">
				<view class="title">产品防伪管理</view>
				<u-icon name="arrow-right"></u-icon>
			</view>

			<!--  #ifdef MP-WEIXIN -->
			<view class="item" hover-class="checkActive" @click="onUnbinding">
				<view class="title">解除绑定账号</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<!-- #endif -->

			<view class="item" hover-class="checkActive" @click="onLogout">
				<view class="title">退出账号</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="actions">
			<!-- #ifdef MP-WEIXIN -->
			<view class="login" v-if="JSON.stringify(business) === '{}'">
				<u-button type="primary" icon="weixin-circle-fill" @click="onLogin">微信一键登陆</u-button>
			</view>
			<!-- #endif -->

			<!--  #ifdef H5 -->
			<view class="login" v-if="JSON.stringify(business) === '{}'">
				<u-button type="primary" @click="toLogin">登陆帐号</u-button>
			</view>
			<!-- #endif -->
		</view>

		<!-- 引入信息提示 -->
		<u-toast ref="uToast"></u-toast>

		<!-- 模态框 -->
		<u-modal :show="ModelShow" @confirm="onConfirm" ref="uModal" :showCancelButton="true" :content="content"
			:title="title" @cancel="ModelShow = false">
		</u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			business: {},
			ModelShow: false,
			content: '是否确认退出账号？',
			title: '退出账号',
			action: 'logout'
		}
	},
	methods: {
		onLogin() {
			this.$refs.uToast.show({
				loading: true,
				type: 'loading',
				message: '登录中',
				complete: () => {
					uni.login({
						provider: 'weixin', // 登录服务提供商
						success: async (res) => {
							let code = res.code ?? '';

							if (!code) {
								this.$refs.uToast.show({
									type: 'error',
									message: '获取登录凭证失败',
								});

								return false;
							}

							let result = await uni.$u.http.post('/business/login', {
								code
							});

							if (result.code === 1) {
								this.$refs.uToast.show({
									type: 'success',
									message: result.msg,
									complete: () => {
										uni.setStorageSync('business', result.data);
										this.business = result.data;
									}
								})
							} else {
								let msg = result.msg ?? '未知信息';

								this.$refs.uToast.show({
									type: 'error',
									message: msg,
									complete: () => {

										let openid = result.data ? result.data.openid : '';

										if (openid) {
											uni.navigateTo({                       //跳转bind页面
												url: '/pages/business/bind?openid=' +
													result.data.openid
											})
										}
									}
								})
							}
						},
					})
				}
			})
		},
		toLogin() {
			this.$u.route('pages/business/login');
		},
		//退出登录
		async onConfirm() {
			this.ModelShow = false;

			// switch
			if (this.action === 'logout') {
				this.$refs.uToast.show({
					type: 'success',
					message: '退出账号成功',
					complete: () => {
						uni.removeStorageSync('business');

						this.business = {}
					}
				})

				return false;
			} else if (this.action === 'unbind') {
				let params = {
					busid: this.business.id
				}

				let result = await uni.$u.http.post('/business/unbind', params);
				if (result.code === 1) {
					this.$refs.uToast.show({
						type: 'success',
						message: result.msg,
						complete: () => {
							uni.removeStorageSync('business');

							this.business = {}
						}
					})

					return false;
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: result.msg
					})

					return false;
				}
			}
		},
		onLogout() {
			this.content = '是否确认退出账号？',
				this.title = '退出账号',
				this.action = 'logout',
				this.ModelShow = true;
		},
		//解除微信绑定
		onUnbinding() {
			this.title = '解除微信绑定',
				this.content = '是否确认解除微信绑定？',
				this.action = 'unbind';
			this.ModelShow = true;
		},
		//产品防伪管理
		ToProduct(){
			this.$u.route('/pages/business/list');
		}
	},
	onShow() {
		this.business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {};
	}
}
</script>

<style>
page {
	background-color: #eee;
}

.container {
	width: 95%;
	margin: 0 auto;
}

.user {
	display: flex;
	padding: 40px;
	background-color: #fff;
	margin-top: 10px;
	border-radius: 10px;
}

/* 仅在H5出现 */
/* #ifdef H5  */
.user {
	align-items: center;
}

/* #endif */

.user .left {
	flex: 3;
}

/* 条件编译 仅在微信平台出现 */
/* #ifdef MP-WEIXIN */
.user .left {
	flex: 3;
	display: flex;
	align-items: center;
	align-content: center;
}

/* #endif */


.user .right {
	flex: 1
}

.user .right .xcx {
	width: 200rpx;
	height: 200rpx;
	border-radius: 100%;
	overflow: hidden;
}

.user .left .nickname {
	font-size: 26px;
	font-weight: bold;
}

.actions {
	display: flex;
	padding: 20px 40rpx;
}

.login {
	flex: 1;
}

.menu {
	background-color: #fff;
	margin-top: 10px;
}

.menu .item {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #ccc;
	padding: 10px 10px;
	font-size: 14px;
}

.checkActive {
	background-color: rgba(233, 233, 233, 0.5);
}
</style>